<template>
  <div id="eventManage">
    <v-header title="标准应用元" :showDownloadBtn = "isDownload" :saveShow="false"></v-header>
    <el-container class="event-manage-box">
      <el-header class="header-tool-bar" height="50px">
        <el-row>
          <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
          <el-button type="primary" size="mini" @click.stop="removedata">删除</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
          <span class="condition-query">
            <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
            <el-button type="primary" size="mini" @click="queryForPage">查询</el-button>
          </span>
        </el-row>
      </el-header>
      <el-main class="meta-table-box">
          <el-table
            ref="table"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            v-loading="tableLoading"
            @selection-change="handleSelectionChange"
            @select="checkrow"
            v-model="checked">
            <el-table-column
              type="selection"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="meta_id"
              label="元数据代码"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="table_name"
              label="英文表名"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="colume_name"
              label="英文字段名"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="colume_chs"
              label="中文字段名"
              width="auto">
            </el-table-column>
            <el-table-column
              prop="colume_attr"
              label="字段属性"
              width="auto"
              :formatter="fmtcolumeattr">
            </el-table-column>
            <el-table-column
              prop="code_id"
              label="代码ID"
              width="auto">
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </el-main>
    </el-container>

    <!--新增/编辑-弹框-->
    <el-dialog :title="addRoleDialogMode == 'ADD' ? '新增数据' : '编辑数据'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               @close="cancel">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="元数据代码" prop="meta_id">
              <el-input v-model="ruleForm.meta_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="显示格式" prop="display_fmt">
                <el-input v-model="ruleForm.display_fmt" ></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="英文表名" prop="table_name">
              <el-input v-model="ruleForm.table_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文字段名" prop="colume_name">
              <el-input v-model="ruleForm.colume_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="对应数据元代码" prop="elem_meta_id">
              <el-input v-model="ruleForm.elem_meta_id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中文字段名" prop="colume_chs">
              <el-input v-model="ruleForm.colume_chs"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="字段属性" prop="colume_attr" >
              <el-select v-model="ruleForm.colume_attr" placeholder="请选择">
                <el-option
                  v-for="item in options.colume_attr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="ruleForm.busi_desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="ruleForm.tech_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="代码ID" prop="code_id">
            <el-input v-model="ruleForm.code_id"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="数据类型" prop="data_type">
               <el-select v-model="ruleForm.data_type" placeholder="请选择">
                  <el-option
                    v-for="item in options.data_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据格式" prop="data_fmt">
              <el-input v-model="ruleForm.data_fmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="meta-app-btn">
          <el-col :span="24">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="cancel('ruleForm')">关闭</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--删除元事件弹框-->
  </div>
</template>

<script>
  import ajax from '../../../../api/ajax/ajax'
  import { VHeader } from '../../../../components'
  import api from '../../../../api/url'
  export default {
    name: 'event-manage',
    components: {
      VHeader
    },
    data () {
      return {
        options: {
          colume_attr: [
            {
                value: 'default',
                label: '默认属性'
            },
            {
                value: 'event',
                label: '事件属性'
            },
            {
              value: 'user',
              label: '用户属性'
            },
            {
              value: 'equipment',
              label: '设备属性'
            }
          ],
          data_type: [
            {
                value: 'number',
                label: '数值'
            },
            {
                value: 'date',
                label: '日期'
            },
            {
              value: 'text',
              label: '文本'
            }
          ]
        },
        tableLoading: true,
        tedate: '',
        ledate: '',
        condition: '', // 输入条件
        checkbox: [],
        multipleSelection: [], // 多选数组
        checked: false, // 是否勾选
        totalCount: 100, // 默认数据总数
        editmetadisa: false,
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        tableData: [], // 表格当前页数据
        list: [],
        isDownload: false,
        ruleForm: {
          meta_id: '',
          table_name: '',
          colume_name: '',
          elem_meta_id: '',
          colume_chs: '',
          colume_attr: '',
          busi_desc: '',
          tech_desc: '',
          code_id: '',
          data_type: '',
          data_fmt: '',
          display_fmt: ''
        },
        rules: {
          meta_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          table_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          colume_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          elem_meta_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          colume_chs: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          colume_attr: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          busi_desc: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          tech_desc: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          code_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          data_type: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          data_fmt: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          display_fmt: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ]
        },
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentItem: {}
      }
    },
    methods: {
      fmtcolumeattr (row, column) {
        return row.colume_attr === 'user' ? '用户属性' : row.colume_attr === 'default' ? '默认属性' : row.colume_attr === 'event' ? '事件属性' : row.colume_attr === 'equipment' ? '设备属性' : '未知属性'
      },
      // 每页显示条目个数
      handleSizeChange (val) {
        this.pagesize = val
        this.handleCurrentChange()
      },
      queryForPage () {
        const pagelistdata = {
          keyword: this.condition,
          pageNo: this.currentPage,
          pageSize: this.pagesize
        }
        ajax.post(api.SELECT_META_APPELEM_LIST_FOR_PAGE, pagelistdata).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      },
      // 当前页数
      handleCurrentChange (val) {
        this.currentPage = val
        this.queryForPage()
      },
      // 勾选当前行
      checkrow (row) {
        if (row.length > 0) {
          this.ruleForm = row[0]
          this.checkbox = row
          this.checked = true
        } else {
          this.checked = false
        }
      },
      // 编辑
      handleEdit (row) {
        // 判断是否勾选
        if (this.checked === true) {
          if (this.checkbox.length < 2) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editmetadisa = true // meta_id input框禁止修改
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            this.currentItem = JSON.parse(JSON.stringify(this.ruleForm))
            this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
          } else {
            this.$message.error('只能选择一条记录进行编辑')
          }
        } else {
          this.$message.error('请至少选择一条记录进行编辑')
        }
      },
      // 重置
      resetForm () {
         this.ruleForm = {...this.currentItem}
         this.$refs.ruleForm.clearValidate()
      },
      // 增加按钮
      adddialogForm () {
        this.ruleForm = {}
        this.currentItem = {}
        this.checked = false
        this.$refs.table.clearSelection()
        this.addRoleDialogVisiable = true
        this.addRoleDialogMode = 'ADD'
        this.editmetadisa = false
        ajax.post(api.METAIDBUILDER, {meta_table_name: 'elem_name'}).then((res) => {
          this.$set(this.ruleForm, 'meta_id', res.data)
        })
      },
      // 返回
      cancel (formName) {
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.ruleForm = this.currentItem
        this.checked = false
        this.$refs.ruleForm.clearValidate()
        this.handleSizeChange()
      },
      // 勾选框事件
      handleSelectionChange (val) {
        let checkedCount = val.length
        if (checkedCount !== 0) {
          this.checked = true
          this.checkbox.length = checkedCount
        }
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            meta_id: val[i].meta_id
          }
          this.list.push(remdata)
        }
      },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              const insertdata = {
                meta_id: this.ruleForm.meta_id,
                display_fmt: this.ruleForm.display_fmt,
                table_name: this.ruleForm.table_name,
                colume_name: this.ruleForm.colume_name,
                elem_meta_id: this.ruleForm.elem_meta_id,
                colume_chs: this.ruleForm.colume_chs,
                colume_attr: this.ruleForm.colume_attr,
                busi_desc: this.ruleForm.busi_desc,
                tech_desc: this.ruleForm.tech_desc,
                code_id: this.ruleForm.code_id,
                data_type: this.ruleForm.data_type,
                data_fmt: this.ruleForm.data_fmt
              }
              if (this.addRoleDialogMode === 'ADD') {
                // 新增接口
                ajax.post(api.INSERT_META_APPELEM, insertdata).then((res) => {
                  this.handleSizeChange()
                  this.addRoleDialogVisiable = false
                  this.$message({
                    type: 'success',
                    message: '增加成功!'
                  })
                })
              } else if (this.addRoleDialogMode === 'MODIFY') {
                // 修改接口
                ajax.post(api.UPDATE_META_APPELEM, insertdata).then((res) => {
                  this.ruleForm = {}
                  this.handleSizeChange()
                  this.addRoleDialogVisiable = false
                  this.$message({
                    type: 'success',
                    message: '编辑成功!'
                  })
                })
              }
          } else {
            return false
          }
        })
      },
      // 删除数据
      removedata () {
        if (this.list.length > 0) {
          this.$confirm('是否删除所选记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: this.list
            }
            ajax.post(api.DELETE_META_APPELEM, remdata).then((res) => {
              this.handleSizeChange()
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            // 去掉取消删除提示
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // })
          })
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      },
      // 刷新
      refresh () {
        this.handleSizeChange()
      }
    },
    created () {
      this.queryForPage()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #eventManage
    height 100%
    position relative
    .event-manage-box
      height 100%
      padding 10px 0px 20px 10px
      .header-tool-bar
        line-height 50px
        vert-align middle
        background-color #FFFFFF
        margin-bottom 3px
        .condition-query
          width 300px
          float right
          margin-right -10px
        .el-input--mini
          width 200px
    .meta-table-box
      padding 0px 0px
      height 100%
      background-color #fff
      .el-pagination
        z-index 5
        padding 10px
        background-color #fff
        position absolute
        width 100%
        bottom 0px;
        padding-bottom 4px
    .el-dialog
      width 900px
      .el-dialog__body
        padding 20px 20px
        margin 0 auto
        margin-right 20px
        .el-date-editor
          width 260px
        .el-input
          width 100%
          .el-input__inner
            height 40px
        .meta-app-btn
          text-align right
          margin-left 10px
        .el-select
          width 278px
          height 41px
        .el-date-editor
          height 40px
          width 100% !important
          .el-range-separator
            height 25px
</style>
